<template>
  <div>
  <el-card style="width: 1000px; margin-left: 40px; margin-top: 10px;" shadow="hover">
        <el-form label-width="80px" size="small">
          <el-upload
              :data="updataAdminHeaderForm"
              :headers="header"
              class="avatar-uploader"
              action="http://192.168.70.124:9090/admin/adminInfo/updateAdminHeader"
              :show-file-list="false"
              :on-success="handleAvatarSuccess">
            <img v-if="adminInfo.adminHeader" :src="adminInfo.adminHeader" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon" />
          </el-upload>
          <el-form-item label="用户名" style="margin-left: 200px; margin-top: -150px">
            <el-input v-model="adminInfo.adminName" :disabled="forbid" autocomplete="off" style="width: 400px"></el-input>
          </el-form-item>
          <el-form-item label="昵称" style="margin-left: 200px">
            <el-input v-model="adminInfo.nickName" :disabled="update" autocomplete="off" style="width: 400px"></el-input>
            <el-button type="primary" icon="el-icon-edit" circle @click="updateAdminInfo"></el-button>
          </el-form-item>
          <el-form-item label="真名"   style="margin-left: 200px">
            <el-input v-model="adminInfo.realName"  :disabled="forbid" autocomplete="off" style="width: 400px"></el-input>
          </el-form-item>
          <el-form-item label="电话" style="margin-left: 200px">
            <el-input v-model="adminInfo.adminPhone" :disabled="forbid" autocomplete="off" style="width: 400px"></el-input>
          </el-form-item>
          <el-form-item label="角色"  style="margin-left: 200px" >
            <el-input  v-model="adminInfo.role" :disabled="forbid" autocomplete="off" style="width: 400px"></el-input>
          </el-form-item>
          <el-form-item label="入职时间"  style="margin-left: 200px" >
            <el-input  v-model="adminInfo.adminWorkDate" :disabled="forbid" autocomplete="off" style="width: 400px"></el-input>
          </el-form-item>
          <el-form-item style="margin-left: 500px">
            <el-button type="primary" v-if="isShow" @click="save">保 存</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
</template>

<script>
  export default{
    name:"FindAdminInfo",
    data(){
      return{
      adminInfo:{},
      updataAdminHeaderForm:{
       accountId:""
      },
      forbid:true,
      update:true,
      isShow:false,
      header:{}
      }
    },
    methods:{
      save(){
        this.$http.get("/admin/adminInfo/updateAdminInfo",{
          params:{
            nickName:this.adminInfo.nickName
          }
        }).then(resp=>{
          if(resp.data.code==200){
            this.$message({
                      message: '修改昵称成功',
                      type: 'success'
                    });
          }else{
             this.$message.error(resp.data.message);
          }
        })
        this.update=true
         this.isShow=false
      },
    updateAdminInfo(){
      this.update=false
       this.isShow=true
    },
    loadMyinfo(){
    this.$http.get("/admin/adminInfo/findAdminInfoBytoken").then(resp=>{
      this.adminInfo=resp.data.data
      this.updataAdminHeaderForm.accountId=resp.data.data.accountId
    })
    },
    handleAvatarSuccess(){
      this.loadMyinfo()
    }
    },
    created(){
      this.loadMyinfo()
      this.header["token"] = localStorage.getItem("token")
    }
  }
</script>

<style>
.avatar-uploader {
  text-align: left;
  padding-bottom: 10px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 138px;
  height: 138px;
  line-height: 138px;
  text-align: center;
}
.avatar {
  width: 160px;
  height: 160px;
  display: block;
}

</style>
